<template>
  <div class="item_detail">
    <van-tabs v-if="goods" v-model="active" sticky>
      <tab-detail :goods="goods" :serverTime="serverTime" />
      <tab-records :goods="goods"></tab-records>
      <tab-live :goods="goods"></tab-live>
    </van-tabs>
    <van-loading v-else color="white" />
    <van-goods-action>
      <van-goods-action-mini-btn to="/">
        <van-icon name="wap-home" />
      </van-goods-action-mini-btn>
      <van-goods-action-mini-btn @click="toCart" :info="cartInfo">
        <van-icon name="cart" />
      </van-goods-action-mini-btn>
      <van-goods-action-big-btn v-if="isSaling" @click="addCart(goods)" text="加入购物车" />
      <van-goods-action-big-btn v-if="isSaling" primary @click="doBuyNow(goods)" text="立即购买" />
      <van-goods-action-big-btn v-else text="停止购买" style="background-color: darkgray;"/>
    </van-goods-action>

    <van-sku v-if="skuData" v-model="showSku" :sku="skuData.sku" :goods="skuData.goods" :goods-id="itemId" :hide-stock="skuData.sku.hide_stock"
      :quota="0" :quota-used="0" @buy-clicked="doBuyNow(goods)" @add-cart="addSkuCart" ref="skuDom" @sku-selected="skuChange">
      <template slot="sku-header-price" slot-scope="props">
        <div v-if="!props.selectedSkuComb" class="van-sku__goods-price">
          <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
          <template v-if="skuData.sku.vipprice && skuData.goods.isvip">
            <span class="van-sku__price-symbol" style="margin-left: 10px;">会员￥</span>
            <span class="van-sku__price-num">{{skuData.sku.vipprice.toFixed(2)}}</span>
          </template>
        </div>
        <div v-else class="van-sku__goods-price">
          <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
          <template v-if="props.selectedSkuComb.vipprice && skuData.goods.isvip">
            <span class="van-sku__price-symbol" style="margin-left: 10px;">会员￥</span>
            <span class="van-sku__price-num">{{props.selectedSkuComb.vipprice.toFixed(2)}}</span>
          </template>
        </div>
      </template>
    </van-sku>
  </div>
</template>

<script>
import { GOODS_DETAIL } from "@/api/goods";
import { CART_ADD, } from "@/api/shop";

import TabDetail from "./tab-detail";
import TabRecords from "./tab-records";
import TabLive from "./tab-live";
import moment from 'moment';
import {
  GoodsAction,
  GoodsActionBigBtn,
  GoodsActionMiniBtn,
  Tab,
  Tabs,
  Sku
} from "vant";

import skuData from '@/vue/mixin/sku-data';
import wxConfig from '@/vue/mixin/wx-config';
import buyAction from '@/vue/mixin/buy-action';
import getConfig from '@/vue/mixin/get-config';

export default {
  mixins: [skuData, wxConfig, buyAction, getConfig],

  props: {
    itemId: [String, Number]
  },

  data() {
    return {
      active: 0,
      mobile: "13454193338",
      selectSku: {
        selectedNum: 1,
        selectedSkuComb: {}
      },
      goods: null,
      productId: this.itemId,
      serverTime: null,
    };
  },

  computed: {
    isSaling() {
      if (!this.goods) {
        return false;
      }

      if (this.goods.total <= (this.goods.sales + this.goods.salesreal)) {
        return false;
      }

      const endTime = moment(this.goods.timeend).utc();
      const startTime = moment(this.goods.timestart).utc();
      return this.serverTime > startTime && this.serverTime < endTime;
    }
  },

  watch: {
    '$route': ' created',
    "showSku"(e){
      if (e) {
        this.$nextTick(()=>{
          //5.14 修该单位
            let el = this.$refs.skuDom.$children[0].$el.getElementsByClassName('van-sku__stock')[0]
            let str = '剩余'+this.skuData.sku.stock_num+this.skuData.sku.unit
            el.innerText = str;
        })
        
      }
    }
  },

  created() {
    this.wxconfig();
    this.initData();
  },

  methods: {
    //选择规格变化
    skuChange(e){
       //5.14 修该单位
      this.$nextTick(()=>{
        let el = this.$refs.skuDom.$children[0].$el.getElementsByClassName('van-sku__stock')[0]
        let str = '剩余'+e.selectedSkuComb.stock_num+this.skuData.sku.unit
        el.innerText = str;
        })
    },
    initData() {
      const user = this.getUser();
      this.$reqGet(`${GOODS_DETAIL}`, {
        productId: this.productId,
        memberId: (user ? user.id : null)
      }).then(res => {
        this.serverTime = res.data.time;
        this.goods = res.data.data;
        this.active = this.goods.zhibo ? 2 : 0;
        this.initSkuData(this.goods);
        this.skuGoods = this.goods;
        this.skuGoods.detail = this.goods;

        if (res.data.data.cartNum > 0) {
          this.cartInfo = res.data.data.cartNum;
        }
        this.getGlobalShare().then(share => {
         const url = this.getUri() + 'register/invite?teamId=' + this.user.upshopTid +
          '&cid=' + this.user.centreId +
          '&redirect=' + encodeURIComponent('/items/detail/') + this.goods.id +
          '&code=' + this.user.myCode;
         this.wxShare(this.replateShare(share.goodsShareTitle || '{tXiaoqu}精心好货正在开抢！')
            , this.replateShare(share.goodsShareDesc || "{goodsname}，只要{price}元")
            , url
            , this.goods.thumb);
        });
      });
    },

    toCart() {
      this.$router.push({
        name: "cart"
      });
    },

    replateShare(value) {
      return value.replace(/{tXiaoqu}/, this.getShop().tXiaoqu)
        .replace(/{goodsname}/, this.goods.title)
        .replace(/{price}/, this.goods.marketprice);
    }
  },

  components: {
    [GoodsAction.name]: GoodsAction,
    [GoodsActionBigBtn.name]: GoodsActionBigBtn,
    [GoodsActionMiniBtn.name]: GoodsActionMiniBtn,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [TabDetail.name]: TabDetail,
    [TabRecords.name]: TabRecords,
    [TabLive.name]: TabLive,
    [Sku.name]: Sku
  }
};
</script>

<style lang="scss" scoped>
.van-goods-action-mini-btn i {
  font-size: 25px;
}

</style>
